<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<div id="o" style="border: 1px solid green;-webkit-user-select:none;" unselectable='on' onmousedown="return false">
    o
</div>
<div id="t3">
    <div id="t2" style="height: 500px;border: 1px solid red;">
        <input type="text" id="t"/>
    </div>
</div>
<script src="http://localhost/lib/jquery/dist/jquery.js"></script>
<script>

    document.body.focus();

    setTimeout(function () {
        $('#t3').on('focusin', function () {
            console.log('t3 focusin: ' + (document.activeElement.nodeName));
        });
        $('#t2').on('focusin', function () {
            console.log('t2 focusin: ' + (document.activeElement.nodeName));
        });

        // order is wrong
        $('#t').on('focus', function () {
            console.log('t focus: ' + (document.activeElement.nodeName));
        });
        $('#t').on('focusin', function (e) {
            e.stopPropagation();
            e.preventDefault();
            console.log('t focusin: ' + (document.activeElement.nodeName));
        });
        $('#o').on('click', function () {
            setTimeout(function () {
                $('#t').trigger('focus');
            }, 1000);
            setTimeout(function () {
                console.log('second fire focus');
                // only trigger currentTarget's focus handler if already focused
                $('#t').trigger('focus');
            }, 2000);
        });
    }, 1000);

</script>
</body>
</html>